<template>
  <div class="view-row-col">
    <fx-card title="基础用法">
      <fx-row v-for="(item,itemIndex) in baseList" :key="itemIndex" class="mb10">
        <fx-col v-for="(child,childIndex) in item" :key="childIndex" :span="child">
          <div :style="{'background-color': childIndex%2?'#999':'#ccc',height: '32px','border-radius':'4px'}"></div>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="分栏间隔">
      <fx-row :gutter="gutters" class="mb10">
        <fx-col :span="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
      </fx-row>
      <fx-input-number v-model="gutters" :min="1"></fx-input-number>
      <template #hide>
        <pre v-highlight="gutter"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="配合搭配">
      <fx-row v-for="(item,itemIndex) in mixList" :key="itemIndex" :gutter="10" class="mb10">
        <fx-col v-for="(child,childIndex) in item" :key="childIndex" :span="child">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="mixed"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="分栏偏移">
      <fx-row class="mb10">
        <fx-col :span="12" :offset="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col :span="6" :offset="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="5" :offset="6">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="offset"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="对齐方式">
      <fx-row :gutter="10" :justify="justify" class="mb10">
        <fx-col :span="4">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="4">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
        <fx-col :span="4">
          <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
        </fx-col>
      </fx-row>
      <fx-radio-group v-model="justify" size="default">
        <fx-radio-button label="flex-start">flex-start</fx-radio-button>
        <fx-radio-button label="flex-end">flex-end</fx-radio-button>
        <fx-radio-button label="center">center</fx-radio-button>
        <fx-radio-button label="space-between">space-between</fx-radio-button>
        <fx-radio-button label="space-around">space-around</fx-radio-button>
        <fx-radio-button label="space-evenly">space-evenly</fx-radio-button>
      </fx-radio-group>
      <template #hide>
        <pre v-highlight="content"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API row 属性">
      <fx-table :data="rowApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API col 属性">
      <fx-table :data="colApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rowApi = [
  { name: 'gutter', directions: '栅格间距', type: 'Number' },
  { name: 'justify', directions: 'flex 布局下的水平排列方式', type: 'String', value: 'center | start...' }
]
// api
const colApi = [
  { name: 'span', directions: '栅格占据的列数', type: 'Number', default: 24 },
  { name: 'offset', directions: '栅格左侧的间隔格数', type: 'Number' }
]

const baseList = [
  [24], [12, 12], [8, 8, 8], [6, 6, 6, 6, 6], [4, 4, 4, 4, 4, 4]
]
const gutters = ref<number>(10)
const mixList = [
  [4, 8, 12], [6, 12, 6], [4, 6, 2, 6, 2, 4]
]
const justify = ref<string>('flex-start')

const base = `<fx-row v-for="(item,itemIndex) in baseList" :key="itemIndex" class="mb10">
  <fx-col v-for="(child,childIndex) in item" :key="childIndex" :span="child">
    <div :style="{'background-color': childIndex%2?'#999':'#ccc',height: '32px'}"></div>
  </fx-col>
</fx-row>

export default defineComponent({
    setup() {
        const baseList = [
          [24], [12, 12], [8, 8, 8], [6, 6, 6, 6, 6], [4, 4, 4, 4, 4, 4]
        ]
    }
})`
const gutter = `<fx-row :gutter="gutters" class="mb10">
  <fx-col :span="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
</fx-row>
<fx-input-number v-model="gutters" :min="1"></fx-input-number>`

const mixed = `<fx-row v-for="(item,itemIndex) in mixList" :key="itemIndex" :gutter="10" class="mb10">
  <fx-col v-for="(child,childIndex) in item" :key="childIndex" :span="child">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
</fx-row>

export default defineComponent({
    setup() {
        const mixList = [
          [4, 8, 12], [6, 12, 6], [4, 6, 2, 6, 2, 4]
        ]
    }
})`

const offset = `<fx-row class="mb10">
  <fx-col :span="12" :offset="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col :span="6" :offset="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="5" :offset="6">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
</fx-row>`

const content = `<fx-row :gutter="10" :justify="justify" class="mb10">
  <fx-col :span="4">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="4">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
  <fx-col :span="4">
    <div style="background-color:#ccc;height: 32px;border-radius: 4px"></div>
  </fx-col>
</fx-row>
<fx-radio-group v-model="justify" size="default">
  <fx-radio-button label="flex-start">flex-start</fx-radio-button>
  <fx-radio-button label="flex-end">flex-end</fx-radio-button>
  <fx-radio-button label="center">center</fx-radio-button>
  <fx-radio-button label="space-between">space-between</fx-radio-button>
  <fx-radio-button label="space-around">space-around</fx-radio-button>
  <fx-radio-button label="space-evenly">space-evenly</fx-radio-button>
</fx-radio-group>`
</script>

<style scoped lang="scss">
.view-row-col {
}
</style>
